<template>
	<div class="items">
		<div class="items_main">
			<!-- 头部涨粉榜 -->
			<ul class="main_men">
				<li class="men_tab">涨粉榜</li>
			</ul>
			<!-- 头部涨粉榜结束 -->
			<div class="main_last mb10">
				<!-- 分类 -->
				<div class="main_text">
					<span>行业分类:</span>
					<div class="item_text">
						<div>
							<el-radio-group v-model="radio1" size="mini" :border="true" fill="#5830a0"
								text-color="#fff">
								<el-radio-button label="全部"></el-radio-button>
								<!-- 分类的数据 -->
								<el-radio-button :label="item.TagName" v-for="(item,index) in $store.state.rank.rankstwo" :key="index">
								</el-radio-button>
							</el-radio-group>
						</div>
					</div>
				</div>
				<!-- 分类结束 -->
				<!-- 时间选择 -->
				<div class="main_time">
					<div class="time_day">
						<el-radio-group v-model="show" size="medium" :border="false" fill="#5830a0">
							<el-radio-button label="0" fill="#5830a0">日榜</el-radio-button>
							<el-radio-button label="1" style="">周榜</el-radio-button>
							<el-radio-button label="2">月榜</el-radio-button>
						</el-radio-group>
					</div>
					<div class="time_date">
						<div v-show="show==0">
							<el-select v-model="select" slot="prepend">
								<el-option v-for="items in $store.state.rank.ranktwo[1]" :key="items.Date" :label="items.DateDesc"
									:value="items.DateDesc"></el-option>
							</el-select>
						</div>
						<div v-show="show==1">
							<el-select v-model="select" slot="prepend">
								<el-option v-for="items in $store.state.rank.ranktwo[7]" :key="items.Date" :label="items.DateDesc"
									:value="items.DateDesc"></el-option>
							</el-select>
						</div>
						<div v-show="show==2">
							<el-select v-model="select" slot="prepend">
								<el-option v-for="items in $store.state.rank.ranktwo[30]" :key="items.Date" :label="items.DateDesc"
									:value="items.DateDesc"></el-option>
							</el-select>
						</div>
					</div>
				</div>
				<!-- 时间选择结束 -->
			</div>
		</div>
		<!-- 底部 -->
		<div class="items_content">
			<div class="content_top mb10">
				<div style="margin-left: 20px;">
					<!-- 底部盒子的头部 -->
					<el-radio-group v-model="num" size="medium" :border="false" fill="#5830a0" @change="fun_btn">
						<el-radio-button label="0">涨粉最快</el-radio-button>
						<el-radio-button label="1">粉丝最多</el-radio-button>
						<el-radio-button label="2">涨粉率最高</el-radio-button>
					</el-radio-group>
				</div>
				<div class="content_export">
					<div class="export_text" style="margin-left: 20px;">
						<div class="export_button">
							<i class="el-icon-folder-opened"></i>
							导出
						</div>
					</div>
				</div>
			</div>
			<!-- 底部盒子的头部结束 -->
			<!-- 底部盒子的内容开始 -->
			<!-- 涨粉最快开始 -->
			<div v-show="num==0" class="content_con" style="margin-top: 20px;margin-left: 20px;">
				<el-table :data="itemlist" style="width: 100%">
					<!-- 排名123 -->
					<el-table-column prop="RankNumber" label="排名" width="220">
						<template></template>
					</el-table-column>
					<!-- 信息 -->
					<el-table-column label="UP主信息" width="590">
						<template slot-scope="scope">
							<div class="user_info">
								<div class="left_box">
									<!-- 头像 -->
									<div class="left_img curp">
										<!-- <img src="../../assets/b713bd6e8d3118e6349f05eaf70652399f48c195.jpg@92w_92h.jpg" alt="" width="50px"> -->
										<img :src="'/bfs'+scope.row.AvatarUrl.substr(23)" alt="">
									</div>
								</div>
								<div class="right_box">
									<div class="flex-box flex-wrap">
										<data class="curp mr5">
											<!-- 姓名 -->
											<h3>{{scope.row.NickName}}</h3>
										</data>
										<!-- 等级 -->
										<span class="up-tag up-tag-lv">lv{{scope.row.LevelNumber}}</span>
										<!-- 详细分类 -->
										<span class="up-tag up-tag-type">{{scope.row.MainTag}}</span>
									</div>
									<div class="flex-box f12">
										<div class="tx-color-gray-8 mr10">
											<!-- uid -->
											UID:<span class="tx-color-black-2">{{scope.row.MId}}</span>
										</div>
										<!-- 机构分类 -->
										<div class="tx-color-blue-3 mr10">
											{{scope.row.BloggerPropsName}}
										</div>
										<div class="official-title text-ov-1">
										</div>
									</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="总粉丝数" width="279">
						<template slot-scope="scope">{{parseInt(scope.row.Fans/100)/100+'w'}}</template>
					</el-table-column>
					<el-table-column label="粉丝增量" width="279">
						<template slot-scope="scope">{{parseInt(scope.row.FansAdd/100)/100+'w'}}</template>
					</el-table-column>
					<el-table-column prop="FandsAddRate" label="涨粉率" width="279">
					</el-table-column>
				</el-table>
				<div class="mt15">
					<el-pagination background layout="prev, pager, next" :total="800">
					</el-pagination>
				</div>
			</div>
			<!-- 涨粉最快结束 -->
			<!-- 粉丝最多开始 -->
			<div v-show="num==1" class="content_con" style="margin-top: 20px;margin-left: 20px;">
				<el-table :data="itemlist" style="width: 100%">
					<!-- 排名123 -->
					<el-table-column prop="RankNumber" label="排名" width="220">
						<template></template>
					</el-table-column>
					<!-- 信息 -->
					<el-table-column label="UP主信息" width="590">
						<template slot-scope="scope">
							<div class="user_info">
								<div class="left_box">
									<!-- 头像 -->
									<div class="left_img curp">
										<!-- <img src="../../assets/b713bd6e8d3118e6349f05eaf70652399f48c195.jpg@92w_92h.jpg" alt="" width="50px"> -->
										<img :src="'/bfs'+scope.row.AvatarUrl.substr(23)" alt="">
									</div>
								</div>
								<div class="right_box">
									<div class="flex-box flex-wrap">
										<data class="curp mr5">
											<!-- 姓名 -->
											<h3>{{scope.row.NickName}}</h3>
										</data>
										<!-- 等级 -->
										<span class="up-tag up-tag-lv">lv{{scope.row.LevelNumber}}</span>
										<!-- 详细分类 -->
										<span class="up-tag up-tag-type">{{scope.row.MainTag}}</span>
									</div>
									<div class="flex-box f12">
										<div class="tx-color-gray-8 mr10">
											<!-- uid -->
											UID:<span class="tx-color-black-2">{{scope.row.MId}}</span>
										</div>
										<!-- 机构分类 -->
										<div class="tx-color-blue-3 mr10">
											{{scope.row.BloggerPropsName}}
										</div>
										<div class="official-title text-ov-1">
										</div>
									</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="总粉丝数" width="279">
						<template slot-scope="scope">{{parseInt(scope.row.Fans/100)/100+'w'}}</template>
					</el-table-column>
					<el-table-column label="粉丝增量" width="279">
						<template slot-scope="scope">{{parseInt(scope.row.FansAdd/100)/100+'w'}}</template>
					</el-table-column>
					<el-table-column prop="FandsAddRate" label="涨粉率" width="279">
					</el-table-column>
				</el-table>
				<div class="mt15">
					<el-pagination background layout="prev, pager, next" :total="800">
					</el-pagination>
				</div>
			</div>
			<!-- 粉丝最多结束 -->
			<!-- 涨粉率最高开始 -->
			<div v-show="num==2" class="content_con" style="margin-top: 20px;margin-left: 20px;">
				<el-table :data="itemlist" style="width: 100%">
					<!-- 排名123 -->
					<el-table-column prop="RankNumber" label="排名" width="220">
						<template></template>
					</el-table-column>
					<!-- 信息 -->
					<el-table-column label="UP主信息" width="590">
						<template slot-scope="scope">
							<div class="user_info">
								<div class="left_box">
									<!-- 头像 -->
									<div class="left_img curp">
										<img :src="'/bfs'+scope.row.AvatarUrl.substr(23)" alt="">
									</div>
								</div>
								<div class="right_box">
									<div class="flex-box flex-wrap">
										<data class="curp mr5">
											<!-- 姓名 -->
											<h3>{{scope.row.NickName}}</h3>
										</data>
										<!-- 等级 -->
										<span class="up-tag up-tag-lv">lv{{scope.row.LevelNumber}}</span>
										<!-- 详细分类 -->
										<span class="up-tag up-tag-type">{{scope.row.MainTag}}</span>
									</div>
									<div class="flex-box f12">
										<div class="tx-color-gray-8 mr10">
											<!-- uid -->
											UID:<span class="tx-color-black-2">{{scope.row.MId}}</span>
										</div>
										<!-- 机构分类 -->
										<div class="tx-color-blue-3 mr10">
											{{scope.row.BloggerPropsName}}
										</div>
										<div class="official-title text-ov-1">
										</div>
									</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="总粉丝数" width="279">
						<template slot-scope="scope">{{parseInt(scope.row.Fans/100)/100+'w'}}</template>
					</el-table-column>
					<el-table-column label="粉丝增量" width="279">
						<template slot-scope="scope">{{parseInt(scope.row.FansAdd/100)/100+'w'}}</template>
					</el-table-column>
					<el-table-column prop="FandsAddRate" label="涨粉率" width="279">
					</el-table-column>
				</el-table>
				<div class="mt15">
					<el-pagination background layout="prev, pager, next" :total="800">
					</el-pagination>
				</div>
			</div>
			<!-- 涨粉率最高结束 -->
		</div>
	</div>
</template>


<style>
	body {
		background-color: #f2f5f0;
	}

	.active {
		background-color: #5830a0;
	}

	.items .items_main {
		width: 1660px;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 0 8px rgb(0, 25, 141, .12);
		border-radius: 2px;
	}

	.items .items_content {
		width: 1660px;
		background-color: #fff;
		margin-top: 20px !important;
		max-width: 1660px;
		overflow-x: hidden;
	}

	.items_main ul {
		display: flex;
		width: fit-content;
	}

	.items_main ul li {
		height: 44px;
		line-height: 44px;
		font-size: 20px;
		padding: 0 25px;
		text-align: center;
		min-width: 140px;
		cursor: pointer;
		border-radius: 2px;
	}

	.items_main ul li.men_tab {
		background-color: #5830a0;
		color: #fff;
		border-radius: 4px;
	}

	.main_last .main_text {
		display: flex;
		margin-top: 16px;
		min-height: 20px;
		font-size: 13px;
	}

	.mb10 {
		margin-top: 10px !important;
	}

	.main_last .main_text>span {
		color: #000;
		width: 60px;
		margin-top: 10px;
	}

	.main_last .main_text .item_text {
		display: flex;
		align-items: center;
		margin-left: 20px;
		flex: 1;
		position: relative;
	}

	.el-radio-group {
		width: 100%;
	}

	.item_text .el-radio-button__inner {
		border-radius: 2px;
		height: 25px;
		display: inline-block;
		border: none;
		color: #5830a0;
		margin: 8px 5px !important;
		line-height: 1;
		font-weight: 540;
		cursor: pointer;
		white-space: nowrap;
		font-size: 13px !important;
		transition: none !important;
	}

	.el-radio-button__orig-radio {

		text-align: center;
	}

	.main_time {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		margin-top: 15px;
	}

	.main_time>.time_day>.el-radio-button.is-active .el-radio-button__inner {
		background-color: #5830a0;
		line-height: 1;
		border: 1px solid #b9c3d2 !important;
		z-index: 2;

	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		background-color: #5830a0;
	}

	.el-input--suffix .el-input__inner {
		width: 194px;
		height: 30px;
		padding-right: 30px;
		margin-left: 15px;
	}

	.main_time>.time_day>.el-radio-button--medium .el-radio-button__inner {
		height: 30px;
	}

	.el-radio-button__inner {
		height: 30px;
		line-height: 0.7;
	}

	.content_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_export {
		display: flex;
		align-items: center;
	}

	.export_button {
		width: 80px;
		height: 30px;
		background: #fff;
		border: 1px solid #5830a0;
		box-sizing: border-box;
		border-radius: 2px;
		font-size: 16px;
		color: #5830a0;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		margin-right: 30px;
	}

	.user_info {
		display: flex;
	}

	.user_info .left_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.curp {
		cursor: pointer !important;
	}

	.user_info .left_img>img {
		position: relative;
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.user_info .right_box {
		text-align: left;
		flex: 1;
		overflow: hidden;
		margin-left: 12px;
		display: flex;
		flex-direction: column;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.user_info .right_box .flex-box {
		display: flex;
		align-items: center;
	}

	.mr5 {
		margin-right: 5px !important;
	}

	.user_info .right_box h3 {
		font-size: 16px;
		color: #454555;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user_info .up-tag {
		font-size: 12px;
		line-height: 19px;
		border-radius: 2px;
		border: 1px solid;
		padding: 0 8px;
		margin-right: 5px;
	}

	.user_info .up-tag.up-tag-lv {
		background-color: rgba(255, 64, 87, .04);
		color: #ff4057;
		border-color: #ff4057;
	}

	..user_info .up-tag.up-tag-type {
		background-color: rgba(140, 97, 255, .06);
		color: #8c61ff;
		border-color: #8c61ff;
	}

	.f12 {
		font-size: 12px !important;
	}

	.mr10 {
		margin-right: 10px !important;
	}

	.tx-color-gray-8 {
		color: #8798ad;
	}

	.tx-color-black-2 {
		color: #2e384d;
	}

	.tx-color-blue-3 {
		color: #387cff;
	}

	.user_info .official-title {
		min-width: 1px;
		max-width: 400px;
		padding-left: 18px;
		position: relative;
	}

	.text-ov-1 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.el-table__row {
		height: 122px;
	}

	.cell:nth-of-type(1) {
		text-align: center;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #5830a0;
	}

	.mt15 {
		margin-top: 15px !important;

	}

	.el-pagination.is-background {
		text-align: center;
	}
	.el-table__body-wrapper.is-scrolling-left{
		overflow-x: hidden !important;
	}
</style>
<script>
	import {
		Rankone,
		RankTwo
	} from '@/api/Rank.js'
	export default {
		data() {
			return {
				tags: [],
				itemlist: [],
				radio1: '全部',
				radio2: '全部',
				value1: '',
				input1: '',
				input2: '',
				input3: '',
				select: '',
				datecodelist: [],
				num: 0,
				show: 0
			}
		},
		mounted() {
			console.log(this.show)
			
		},
		created() {
			this.$store.dispatch("getRank"),
			this.fun(3);
			RankTwo({
					r: '0.14644890952907907',
					rankType: 3
				})
				.then(res => {
					if (res.data.Code === 200) {
						this.tags = res.data.Data.Tags
						this.datecodelist = res.data.Data.DateCodeList
						// console.log(this.tags)
						// console.log(this.datecodelist)
					}
				})
		},
		methods: {
			
			fun_btn(event) {
				// console.log(event)
				if (event == 0) {
					this.fun(3);
				} else if (event == 1) {
					this.fun(2);
				} else if (event == 2) {
					this.fun(4);
				}
			},
			fun(index) {
				Rankone({
						r: '0.46359522174782586',
						childCategoryId: 0,
						categoryId: 0,
						Period: 1,
						DateCode:20220806,
						rankType: index,
						pageIndex: 1,
						pageSize: 10,
					})
					.then(res => {
						if (res.data.Code === 200) {
							this.itemlist = res.data.Data.ItemList
							console.log(this.itemlist)
						}
					})
			}
		}
	}
</script>
